<template>
  <div>
    <!-- 
      props 配置选项
      label 指定节点标签为节点对象的某个属性值
      children  指定子树为节点对象的某个属性值
      isLeaf  指定节点是否为叶子节点，仅在指定了lazy属性的情况下生效

      load  加载子树数据的方法，仅当lazy属性为true时生效
            自动执行函数 -- 异步请求数据

      lazy  是否懒加载子节点，需与来打方法结合使用

      accordion 手风琴样的
     -->
    <el-tree 
      :props="props" 
      :load="loadNode" 
      lazy
      :expand-on-click-node="false"
      accordion
      @node-click="handleNodeClick"
    > </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    loadNode(node, resolve) { //resolve()成功的返回数据结果
      if (node.level === 0) {
        //进入页面获取第一层的tree数据
        return resolve([
          { id: 1, name: "家用电器" },
          { id: 2, name: "数码" },
          { id: 3, name: "电脑相关" },
          { id: 4, name: "家具非电器" },
        ]);
      }
      if (node.level == 1) {
        if(node.id == 1) {
          return resolve([
            { id: 101, name: "冰箱", leaf: true},
            { id: 102, name: "洗衣机", leaf: true},
            { id: 103, name: "空调", leaf: true},
            { id: 104, name: "热水器", leaf: true},
            { id: 105, name: "电饭煲", leaf: true},
            { id: 106, name: "电视机", leaf: true}
          ]);
        } else if(node.id == 2) {
          return resolve([
            { id: 201, name: "摄像头", leaf: true},
            { id: 202, name: "摄像机", leaf: true},
            { id: 203, name: "音响", leaf: true},
            { id: 204, name: "机顶盒", leaf: true},
            { id: 205, name: "储存卡", leaf: true},
            { id: 206, name: "手机", leaf: true},
            { id: 207, name: "数码相机", leaf: true},
            { id: 208, name: "耳机", leaf: true},
            { id: 209, name: "U盘", leaf: true},
          ]);
        } else if(node.id == 3) {
          return resolve([
            { id: 301, name: "显示屏", leaf: true},
            { id: 302, name: "显卡", leaf: true},
            { id: 303, name: "主板", leaf: true},
            { id: 304, name: "散热器", leaf: true},
            { id: 305, name: "内存条", leaf: true},
            { id: 306, name: "CPU", leaf: true},
            { id: 307, name: "鼠标", leaf: true},
            { id: 308, name: "键盘", leaf: true},
          ]);
        } else {
          return resolve([
            { id: 401, name: "床", leaf: true},
            { id: 401, name: "桌子", leaf: true},
            { id: 401, name: "椅子", leaf: true},
            { id: 401, name: "沙发", leaf: true},
            { id: 401, name: "茶几", leaf: true},
            { id: 401, name: "柜子", leaf: true},
          ]);
        }
        
      } 

      
    },
    handleNodeClick(data,node) {
      this.$emit("sendTreeData",data)
    }
  },
};
</script>

<style>
</style>